<template>
    <v-content>
        <v-container ><v-card>
            <v-col class="main" >
    <v-form
            ref="form"
    >
        <v-text-field
                v-model="name"

                :rules="nameRules"
                label="Name"
                required
        ></v-text-field>
        <v-btn

                @click="validate"
        >
            Validate
        </v-btn>
    </v-form>
            </v-col>

        </v-card></v-container >
    </v-content>
</template>

<script>
    export default {
        data: () => ({
            name: '',
            nameRules: [
                v => !!v || 'Name is required',
                v => (v && v.length <= 10) || 'Name must be less than 10 characters',
            ],
        }),

        methods: {
            validate () {
                this.$refs.form.validate()
            }
        },
    }
</script>